<template>
  <div ref="mainStudy">

  </div>
</template>

<script>
import * as d3 from 'd3';

export default {
  mounted() {
    const data = this.generateData(); // 生成随机数据

    const margin = { top: 20, right: 20, bottom: 30, left: 40 };
    const width = 960 - margin.left - margin.right;
    const height = 500 - margin.top - margin.bottom;

    const svg = d3.select(this.$refs.chart)
      .append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`);

    const x = d3.scaleLinear()
      .domain(d3.extent(data, d => d.x))
      .range([0, width]);

    const y = d3.scaleLinear()
      .domain(d3.extent(data, d => d.y))
      .range([height, 0]);

    const line = d3.line()
      .x(d => x(d.x))
      .y(d => y(d.y));

    svg.append('path')
      .datum(data)
      .attr('fill', 'none')
      .attr('stroke', 'steelblue')
      .attr('stroke-width', 2)
      .attr('d', line);
  },

  methods: {
    generateData() {
      const data = [];
      let x = 0;
      let y = 50;

      for (let i = 0; i < 60; i++) {
        x += 10;
        y += Math.random() * 10 - 5;
        data.push({ x, y });
      }

      return data;
    },
  },
};
</script>

<style scoped>
svg {
  font: 10px sans-serif;
}
</style>